<template>
    <div>
        <div class="list-nav">
            <ul>
                <li v-for="(item, index) in shortCut" :key="index" @click="$router.push('/ranking')">
                    <i class="ph" :style="`background-image: url(${item.cover});`"></i>
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: ["shortCut"],
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
.list-nav {
    // border: 1px solid #000;
    width: 100%;
    height: 50px;
    ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    li {
        // border: 1px solid #000;
        flex: 1;
        // width: 20%;
        text-align: center;
    }
    i {
        margin: 0 auto;
        display: block;
        width: 35px;
        height: 35px;
        // background: #000;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    p {
        margin-top: 2px;
        font-size: 14px;
        color: #313131;
    }

    .ph {
        background-image: url(@/assets/ph.png);
    }
    .rq {
        background-image: url(@/assets/rq.png);
    }
    .wj {
        background-image: url(@/assets/wj.png);
    }
    .qw {
        background-image: url(@/assets/qw.png);
    }
    .jp {
        background-image: url(@/assets/jp.png);
    }
}
</style>
